<template>
	<view class="body" >
		<view class="header">
			<image class="header-back" src="@/static/my/header.png" mode="widthFix"></image>
			<view class="user">
				<view class="photo">
					<view class="photo-bg">
						<image src="@/static/my/user.png" mode="widthFix"></image>
					</view>
					<view class="title">
						<view class="name">尊敬的用户</view>
						<view class="phone">{{ maskedPhone }}</view>
					</view>
				</view>
				<!-- <view class="seeting">
					<image  src="@/static/my/seeting.png" mode="widthFix"></image>
					<view>设置</view>
				</view> -->
				
			</view>
			<view class="days">
				<image src="@/static/my/icon.png" mode="widthFix"></image>
				<view class="days-text">这是您在蜂鸟云上机的第 <label> {{ daysOnPlatform }} </label> 天</view>
			</view>	
		</view>

		<view class="content"  @click="showToast()">
			<view class="purse">
				<view class="title">
					<view class="name">
						<label>我的钱包</label>
						<image
                            v-if="!showMoney"
                            src="@/static/my/eye1.png"
                            mode="aspectFit"
                            @click="toggleMoney"
                        />
                        <image
                            v-else
                            src="@/static/my/eye.png"
                            mode="aspectFit"
                            @click="toggleMoney"
                        />

					</view>
					<view class="payouts">申请提现 ></view>
				</view>
				<view class="money">
					<view class="money-item">
						<view class="money-num"> {{ showMoney ? realMoney1 : '****' }}</view>
						<view class="money-text">未体现余额</view>
					</view>
					<view class="money-item">
						<view class="money-num">{{ showMoney ? realMoney1 : '****' }}</view>
						<view class="money-text">已提现余额</view>
					</view>
					<view class="money-item">
						<view class="money-num">{{ showMoney ? realMoney1 : '****' }}</view>
						<view class="money-text">历史累计收益</view>
					</view>
				</view>
			</view>
			<view class="menu" @click="onWxBind()">
				<view class="menu-item">
					<view class="menu-item-list">
						<image class="pic" src="@/static/my/bill.png" mode="widthFix"></image>
						<view class="text">
							<view class="left">我的账单</view>
							<view class="right">
								<view class="menu-text">查看历史账单记录</view>
								<image src="@/static/my/right.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
					<view class="menu-item-list">
						<image class="pic" src="@/static/my/property.png" mode="widthFix"></image>
						<view class="text">
							<view class="left">收款信息</view>
							<view class="right">
								<image src="@/static/my/right.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
					<view class="menu-item-list">
						<image class="pic" src="@/static/my/save.png" mode="widthFix"></image>
						<view class="text">
							<view class="left">安全中心</view>
							<view class="right">
								<view class="menu-text">修改密码</view>
								<image src="@/static/my/right.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>

				<view class="menu-item">
					<view class="menu-item-list">
						<image class="pic" src="@/static/my/serve.png" mode="widthFix"></image>
						<view class="text">
							<view class="left">服务中心</view>
							<view class="right">
								<image src="@/static/my/right.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
					<view class="menu-item-list">
						<image class="pic" src="@/static/my/agreement.png" mode="widthFix"></image>
						<view class="text">
							<view class="left">协议中心</view>
							<view class="right">
								<image src="@/static/my/right.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
					<view class="menu-item-list">
						<image class="pic" src="@/static/my/menu.png" mode="widthFix"></image>
						<view class="text">
							<view class="left">上机手册</view>
							<view class="right">
								<image src="@/static/my/right.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
import { ref,computed } from 'vue'
import { onLoad,onShow } from '@dcloudio/uni-app'
import { checkLogin,showToast } from '@/utils/auth'
import { apiPostWxBind } from '@/api/my';



onLoad(() => {
    //登录验证
    checkLogin()
})
onShow(() => {
  // 触发数据变化或强制刷新
})

const userInfo = ref(uni.getStorageSync('userInfo') || {})

//隐藏手机号4位
const maskedPhone = computed(() => {
    const phone = userInfo.value.username || ''
    // 只处理11位手机号
    if (phone.length === 11) {
        return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    }
    return phone
})

// 计算用户在平台上的天数
const daysOnPlatform = computed(() => {
    const reg = userInfo.value.registered_on
    if (!reg) return 0
    // 将字符串转为时间戳
    const regTime = new Date(reg.replace(/-/g, '/')).getTime()
    const now = Date.now()
    // 计算天数，向上取整，至少为1天
    const diff = Math.ceil((now - regTime) / (1000 * 60 * 60 * 24))
    return diff > 0 ? diff : 1
})


//钱包显示
const showMoney = ref(false) // 默认隐藏金额
const realMoney1 = ref('1234.56') // 这里替换为实际查询到的数据

function toggleMoney() {
    showMoney.value = !showMoney.value
}

// 微信登录绑定
const onWxBind = () => {
    uni.login({
        provider: 'weixin',
        success: async (loginRes) => {
			console.log('微信登录成功', loginRes.code);
            const res = await apiPostWxBind(loginRes.code);
            // 这里可以根据 res 处理绑定结果
        },
        fail: function (err) {
            uni.showToast({ title: '微信登录失败', icon: 'none' })
        }
    })
}



</script>

<style lang="scss">
.body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
	background-color: #F2F2F2;
}
.header {
	.header-back{
		width: 100%;
	}
    .user {
		position: absolute;
		top: 170rpx;
		left: 55.21rpx;
		display: flex;
		.photo {
			display: flex;
			.photo-bg{
				width: 150rpx;
				border-radius: 50%;
				display: flex;
			}

			.title {
				color: #FFFEFE;
				padding-left:39rpx;
				.name {
					font-size: 52rpx;
					padding-bottom: 20rpx;
				}
				.phone {
					font-size: 44rpx;
				}
			}
		}
		.seeting {
			font-size: 20rpx;
			color: #FFFEFE;
			image{
				width: 42.71rpx;
			}

		}
    }
	.days {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 341.38rpx;
		left: 178.13rpx;

		image{
			width: 31.25rpx;
		}
		.days-text {
			padding-left: 10rpx;
			color: #FFFFFF;
			font-size: 27rpx;
		}
	}


}

.content {
	width: 690rpx;
	position: absolute;
	top: 425rpx;
	left: 30.21rpx;
	.purse {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 38.02rpx 22rpx 41.67rpx 22rpx;
		.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #898989;

			.name {
				border-bottom: 3rpx solid #007AFF;
				padding:0 29.17rpx 7.81rpx 7.81rpx;
				label{
					font-size: 37rpx;
					color: #333333;
				}
				image{
					margin-left: 13.45rpx;
					width: 29.17rpx;
					height: 21.88rpx;
				}
			}
			.payouts{
				color: #224CE7;
				font-size: 29rpx;
			}
		}
		.money {
			padding-top: 48.44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			.money-item{
				padding: 0 30rpx;
				.money-num {
					color: #333333;
					font-size:  36rpx;
				}
				.money-text {
					color: #8E8E8E;
					font-size: 29rpx;
				}
			}
		}
	}

	.menu{
		.menu-item {
			margin-top: 22rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			padding: 20rpx 25rpx ;
			.menu-item-list{
				display: flex;
				padding: 19rpx 24rpx;
				.pic{
					width: 47.4rpx; 
					margin-right: 15rpx;
				}
				.text {
					width: 565.99rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #F1F2F3;
					padding-bottom: 23.96rpx;
					.left {
						color: #262626;
						font-size: 34rpx;
					}
					.right {
						display: flex;
						align-items: center;
						.menu-text {
							color: #D5D5D5;
							font-size: 31rpx;
						}
						image{
							width: 9.38rpx;
							height: 17.19rpx;
							padding-left: 10.94rpx;
						}
					}
				}

				
			}
			.menu-item-list:last-child .text {
				border-bottom: none;
			}
			
		}
	}
}
</style>
